<template>
  <Card>
    <p slot="title">个人资料</p>
    <div slot="extra">
      <Button size="small" type="primary" @click="updateReadOnly">更新个人资料</Button>
    </div>
    <Form :model="account" :label-width="100" :rules="accountRule">
      <Row>
        <Col span="7">
          <Row>
            <FormItem prop="username" label="用户名">
              <Input
                type="text"
                v-model="account.username"
                placeholder="请输入用户名"
                :readonly="readonly"
              />
            </FormItem>
          </Row>

          <Row>
            <FormItem prop="gender" label="性别">
              <RadioGroup v-model="account.gender">
                <Radio label="男"></Radio>
                <Radio label="女"></Radio>
              </RadioGroup>
            </FormItem>
          </Row>

          <Row>
            <FormItem prop="birthday" label="出生日期">
              <Date-picker
                type="date"
                v-model="account.birthday"
                placeholder="选择日期"
                :readonly="readonly"
              />
            </FormItem>
          </Row>

          <Row>
            <FormItem prop="address" label="通讯地址">
              <Input type="text" v-model="account.address" placeholder="通讯地址" :readonly="readonly" />
            </FormItem>
          </Row>

          <Row>
            <FormItem prop="phone" label="手机号">
              <Input type="text" v-model="account.phone" placeholder="手机号" :readonly="readonly" />
            </FormItem>
          </Row>

          <Row>
            <FormItem prop="email" label="电子邮件">
              <Input type="text" v-model="account.email" placeholder="电子邮件" :readonly="readonly" />
            </FormItem>
          </Row>

          <Row>
            <FormItem prop="intro" label="个人简介">
              <Input
                type="textarea"
                size="large"
                :rows="6"
                v-model="account.intro"
                placeholder="个人简介"
                :readonly="readonly"
              />
            </FormItem>
          </Row>
        </Col>
      </Row>

      <FormItem>
        <Button type="primary" @click="updateUserInfo('formInline')">确定</Button>
      </FormItem>
    </Form>
  </Card>
</template>

<script>
export default {
  data() {
    return {
      readonly: true,
      account: {
        username: "",
        phone: "",
        birthday: "",
        address: "",
        email: "",
        gender: "男",
        intro: ""
      },
      accountRule: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur"
          }
        ],
        birthday: [
          {
            required: true,
            message: "请选择生日",
            trigger: "blur"
          }
        ],
        address: [
          {
            required: true,
            message: "请输入地址",
            trigger: "blur"
          }
        ],
        gender: [
          {
            required: true,
            message: "请选择性别",
            trigger: "blur"
          }
        ],
        intro: [
          {
            required: true,
            message: "请输入简介",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    updateReadOnly() {
      this.readonly = !this.readonly;
    },
    updateUserInfo() {
      this.$Modal.confirm({
        title: `确认修改用户信息？`,
        onOk: () => {
          this.account.birthday = Date.parse(this.account.birthday)
          this.jsonrpc.contribute.user
            .updateUserInfo(this.account)
            .then(res => {
              this.readonly = false;
              this.account.birthday = new Date(this.account.birthday);
            });
        }
      });
    }
  },
  mounted() {
    this.jsonrpc.contribute.user.getUserInfo().then(res => {
      this.account = res.info;
      this.account.birthday = new Date(this.account.birthday);
    });
  }
};
</script>

<style lang="stylus" scoped></style>